<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历操作</title>
</head>
<body>
    <input type="button" id="btn" value="遍历列表项">
    <ul>
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>传智专修学院</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一 传统方式
    /*$("#btn").click(function () {
        let lis = $("li")
        for(let i = 0;i<lis.length;i++){
            alert(i+":"+lis[i].innerHTML)
        }
    })*/
    //方式二 对象.each()方法
   /* $("#btn").click(function () {
        let lis = $("li")
        lis.each(function (index, ele) {
            alert(index+":"+ele.innerHTML)
        })
    })*/
    //方式三 $.each()方法
    /*$("#btn").click(function () {
        let lis = $("li")
        $.each(lis,function (index, ele) {
            alert(index+":"+ele.innerHTML)
        })
    })*/
    //方式四 for of语句
    $("#btn").click(function () {
        let lis = $("li")
        for(ele of lis){
            alert(ele.innerHTML)
        }
    })
</script>
</html>